<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import {
  LeftOutlined,
  RightOutlined,
} from '@ant-design/icons-vue';
import { useRouter, useRoute } from 'vue-router';

const routeMap = [
  '/',
  '/upload-images',
  '/make',
];

const router = useRouter();
const route = useRoute();

const currentStep = ref(0);

watchEffect(() => {
  currentStep.value = routeMap.findIndex(r => r === route.path);
});

function go (current: number) {
  router.push(routeMap[current]);
}

// 后退
function onBack () {
  router.push(routeMap[currentStep.value - 1]);
}

// 前进
function onNext () {
  router.push(routeMap[currentStep.value + 1]);
}

</script>

<template>
  <header>
    <a-button
      type="primary"
      shape="circle"
      :disabled="currentStep === 0"
      @click="onBack"
    >
      <template #icon><left-outlined /></template>
    </a-button>
    <a-steps
      class="steps"
      :current="currentStep"
      @change="go"
    >
      <a-step title="上传logo" />
      <a-step title="上传图片" />
      <a-step title="制作" />
    </a-steps>
    <a-button
      type="primary"
      shape="circle"
      :disabled="currentStep === 2"
      @click="onNext"
    >
      <template #icon><right-outlined /></template>
    </a-button>
  </header>
  <router-view />
</template>

<style>
body {
  padding: 16px;
}
header {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
header .steps {
  flex: 1;
  margin: 0 16px;
}
</style>
